# Установка, подключение

npm i goodt-framework-css --save
npm i less --save-dev
npm i less-loader --save-dev

// ваш <enty-point>.js
import 'goodt-framework-css/src/_all.less'

npm run build

# Структура

# Компоненты

Компонент условно делится на три части

Пример компонента

// [1] параметры, которые использует компонент
@example-font-size: .8rem;
@example-line-height: 1.5;
@example-padding: @spacer3 @spacer4;
@example-color: @color-white;
@example-background: @color-body;

// [2] хук, вызываемый в стиле компонента; позволяет переопределить стиль компонента
.hook-example() {}

// [3] стиль
.example {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: @example-padding; // <-- использование параметров [1]
    color: @example-color;
    font-size: @example-font-size;
    line-height: @example-line-height;
    background: @example-background;
    .hook-example(); // <-- вставка хука [2]
}

# Кастомизация

// импорт фреймворка
@import './<путь>/_all.less';

// переопределяем базовые параметры, используемые всеми частями фреймворка из ~ params.less
@font-family: Helvetica, Arial, sans-serif;
@font-family-headings: Helvetica, Arial, sans-serif;
@font-size: 16px;

// переопределяем параметры конкретного компонента  ~ components/toast.less
@toast-font-size: 1rem;
// используем хук компонента ~ toast.less
.hook-toast() {
    display: inline-flex; // <-- переопределяет "display", который изначально в компоненте "inline-block"
}

# Система отступов

# Responsive

.{viewport}-{classname}

// например
.s-text-small

// где
// {viewport} — s
// {classname} — text-small

@import './<путь>/_helpers.less'
// пример использования .media хелпера
.my-class {
    font-size: 1rem;
}
.media(@viewport-s, .my-class {
    font-size: .9rem;
})

# Viewport

# Css переменные

# Less переменные

npm install @mdi/font --save
npm install @mdi/light-font --save

// ваш <entry-point>.js
import '@mdi/font/css/materialdesignicons.min.css';
import '@mdi/light-font/css/materialdesignicons-light.min.css'